import {messages} from 'share/common';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  Button, Row, Col, Spin
} from 'antd';
import 'styles/supplier-management/new-consumer-management/consumer-description.scss';
import NewConsumerServer from './new-consumer-server';

class ConsumerDescription extends Component {

  constructor(props) {
    super(props);
    this.state = {
      descriptionData: {
        serverDescs: [],
        descriptions: [],
      },
      loading: false,
    };
  }

  componentWillMount() {
    NewConsumerServer(this).getDescription(this.props.type).then((res) => {
      this.setState({ descriptionData: res.data.body.data });
    });
  }

  render() {
    const {
      toOpen, isOpen, type, openStatus, btnLoading
    } = this.props;
    const { descriptionData, loading } = this.state;
    const desLength = descriptionData.serverDescs.length;
    const spn = desLength > 4 ? 4 : desLength;
    const cols = 100 / spn;
    return (
      <div className="consumer-description">
        <Spin spinning={loading}>
          <div className="bg-img-set" style={{backgroundImage: `url(${descriptionData.bgUrl})`}}>
            <h1>{descriptionData.title}</h1>
            {
              descriptionData.descriptions.map((item) => (
                <p className={item.style === 'M' ? 'main-desc' : 'description-p'}>{item.des}</p>
              ))
            }
            <div className="open-btn">
              {(() => {
                if (type === 'CMBC') {
                  return (
                    <Button type="primary" loading={btnLoading} onClick={() => toOpen(type, openStatus)}>
                      {openStatus ? messages('supplier.key165'/* 关闭服务 */) : messages('supplier.key55'/* 在线开通 */)}
                    </Button>
                  );
                }
                if (!loading) {
                  return (
                    <Button type="primary" onClick={toOpen} disabled={!isOpen}>
                      {messages('supplier.key55')/* 在线开通 */}
                    </Button>
                  );
                }
                return null;
              })()}

              <p className="no-open-text" style={{opacity: !isOpen ? 1 : 0}}>{messages('supplier.key496')/* 暂无在线开通，可联系项目顾问进行开通 */}</p>
            </div>
            {descriptionData.logoUrl && (<img src={descriptionData.logoUrl} className="open-logo" />)}
          </div>
          {
            !loading && (
              <div className="footer-center">
                <h2 style={{ color: '#4B8DFF' }}>{messages('supplier.key287')/* 服务介绍 */}</h2>
              </div>
            )
          }
          <div>
            <Row>
              {
                descriptionData.serverDescs.map((item) => (
                  <Col span={8} style={{ width: `${cols}%`, marginTop: 26 }}>
                    <img src={item.imgUrl} className="server-icon" />
                    <div style={{ overflow: 'hidden' }}>
                      <h3 style={{ margin: '4px 0', wordBreak: 'normal' }}>{item.title}</h3>
                      <p style={{ margin: '0 auto', wordBreak: 'normal' }}>{item.description}</p>
                    </div>
                  </Col>
                ))
              }
            </Row>
          </div>
        </Spin>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {};
}

export default connect(mapStateToProps)(ConsumerDescription);
